import React, { useEffect, useState } from 'react'
import style from './order.module.css'
import { Button, Form } from 'antd'
import moment from 'moment'
import { DatePicker, Select } from 'antd';
import { Segmented, Tabs } from 'antd';
import type { TabsProps } from 'antd';
import { getGuoTableData } from '../../request';
const { RangePicker } = DatePicker;
interface DataType {
  key: string;
  name: string;
  name2: string;
  shopname: string;
  phone: number;
  bill: string;
  types: string;
  watertypes: string;
  money: string;
  status: string;
  image: string;
  desc: string;
  address: string;
  createdAt?: string;
}
function Index() {
  // 设置默认日期范围
  const initialDateRange = [moment('2003-12-10', 'YYYY-MM-DD'), moment('2006-6-15')]
  // 选择器订单状态
  const handleChange = (value: string) => {
    setSelectOrderStatus(value)
  };
  // tabs切换
  const onChange = (key: string) => {
    console.log(key);
  };
  const [tableData, setTableData] = useState<DataType>([])
  const [orderFen, setOrderFen] = useState<{
    all: DataType[]
    waitPay: DataType[],
    waitSend: DataType[],
    waitReceive: DataType[],
    waitOk: DataType[],
    waitOff: DataType[]
  }>({
    all: [],
    waitPay: [],
    waitSend: [],
    waitReceive: [],
    waitOk: [],
    waitOff: []
  })

  // 搜索条件状态
  const [searchBill, setSearchBill] = useState('')
  const [selectOrderStatus, setSelectOrderStatus] = useState('全部')
  const [selectedRefundStatus, setSelectedRefundStatus] = useState('暂不选择');
  useEffect(() => {
    getGuoTableData().then((res) => {
      setTableData(res.data.tab)
      console.log(res.data.tab)
      // 分类订单数据
      const orderFendata = {
        all: res.data.tab,
        waitPay: res.data.tab.filter(item => item.status === '待付款'),
        waitSend: res.data.tab.filter(item => item.status === '待发货'),
        waitReceive: res.data.tab.filter(item => item.status === '待收货'),
        waitOk: res.data.tab.filter(item => item.status === '已完成'),
        waitOff: res.data.tab.filter(item => item.status === '已关闭')
      }
      setOrderFen(orderFendata)
    })
  }, [])

  // 筛选订单点击事件
  const handleOrderSearch = () => {
    const filterData = tableData.filter(item => {
      const billData = searchBill === '' || item.bill.includes(searchBill);
      const statusData = selectOrderStatus === '全部' || item.status === selectOrderStatus
      return billData && statusData
    })
    const filterorderData = {
      all: filterData,
      waitPay: filterData.filter(item => item.status === '待付款'),
      waitSend: filterData.filter(item => item.status === '待发货'),
      waitReceive: filterData.filter(item => item.status === '待收货'),
      waitOk: filterData.filter(item => item.status === '已完成'),
      waitOff: filterData.filter(item => item.status === '已关闭')
    }
    setOrderFen(filterorderData)
  }
  const items: TabsProps['items'] = [
    {
      key: '1', label: '全部', children:
        <div>
          <div className={style.tab_top}>
            <p>订单信息</p>
            <p>卖家</p>
            <p>收货信息</p>
            <p>操作</p>
          </div>
          {
            orderFen.all.map((item) => (
              <div style={{ border: '#eee solid 1px', marginTop: '15px' }}>
                <div key={item.key} className={style.tab_body}>
                  <div style={{ width: '400px', display: 'flex', justifyContent: 'space-between' }}>
                    <p>订单号：{item.bill}</p>
                    <p>业务员：{item.name}</p>
                  </div>
                  <div style={{ width: '700px', display: 'flex', justifyContent: 'end' }}>
                    <p>共1件商品</p>&emsp;
                    <p>合计：￥{item.money}(含运费:￥0.00)</p>
                  </div>
                </div>
                <div className={style.tab_main}>
                  <div className={style.image}>
                    <p>
                      <img src={item.image} alt="" />
                    </p>
                    <div style={{ display: 'flex', borderRight: '#eee solid 1px', padding: '4px', height: 120 }}>
                      <p style={{ width: 280, marginRight: '10px' }}>
                        <span>{item.desc}</span><br /><br />
                        <b style={{ color: 'red' }}>{item.status}</b>
                      </p>
                      <div>
                        <p>￥{item.money}</p>
                        <p style={{ marginLeft: '40px' }}>x1</p>
                      </div>
                    </div>
                  </div>
                  <div>
                    <p style={{ width: 100, padding: '10px', borderRight: '1px solid #eee', height: 120 }}>
                      {item.shopname}-test
                    </p>
                  </div>
                  <div>
                    <p style={{ width: 500, padding: '10px', borderRight: '1px solid #eee', height: 120 }}>
                      {item.name2}&emsp;{item.phone} <br />
                      {item.address} <br />
                    </p>
                  </div>
                  <div style={{ padding: '10px', height: 120, width: 200 }}>
                    <a>
                      订单详情
                    </a>
                  </div>
                </div>
              </div>
            ))
          }
        </div>
    },
    {
      key: '2', label: '待付款', children: <div>
        <div className={style.tab_top}>
          <p>订单信息</p>
          <p>卖家</p>
          <p>收货信息</p>
          <p>操作</p>
        </div>
        {
          orderFen.waitPay.map((item) => (
            <div style={{ border: '#eee solid 1px', marginTop: '15px' }}>
              <div key={item.key} className={style.tab_body}>
                <div style={{ width: '400px', display: 'flex', justifyContent: 'space-between' }}>
                  <p>订单号：{item.bill}</p>
                  <p>业务员：{item.name}</p>
                </div>
                <div style={{ width: '700px', display: 'flex', justifyContent: 'end' }}>
                  <p>共1件商品</p>&emsp;
                  <p>合计：￥{item.money}(含运费:￥0.00)</p>
                </div>
              </div>
              <div className={style.tab_main}>
                <div className={style.image}>
                  <p>
                    <img src={item.image} alt="" />
                  </p>
                  <div style={{ display: 'flex', borderRight: '#eee solid 1px', padding: '4px', height: 120 }}>
                    <p style={{ width: 280, marginRight: '10px' }}>
                      <span>{item.desc}</span><br /><br />
                      <b style={{ color: 'red' }}>{item.status}</b>
                    </p>
                    <div>
                      <p>￥{item.money}</p>
                      <p style={{ marginLeft: '40px' }}>x1</p>
                    </div>
                  </div>
                </div>
                <div>
                  <p style={{ width: 100, padding: '10px', borderRight: '1px solid #eee', height: 120 }}>
                    {item.shopname}-test
                  </p>
                </div>
                <div>
                  <p style={{ width: 500, padding: '10px', borderRight: '1px solid #eee', height: 120 }}>
                    {item.name2}&emsp;{item.phone} <br />
                    {item.address} <br />
                  </p>
                </div>
                <div style={{ padding: '10px', height: 120, width: 200 }}>
                  <a>
                    订单详情
                  </a>
                </div>
              </div>
            </div>
          ))
        }
      </div>
    },
    {
      key: '3', label: '待发货', children: <div>
        <div className={style.tab_top}>
          <p>订单信息</p>
          <p>卖家</p>
          <p>收货信息</p>
          <p>操作</p>
        </div>
        {
          orderFen.waitSend.map((item) => (
            <div style={{ border: '#eee solid 1px', marginTop: '15px' }}>
              <div key={item.key} className={style.tab_body}>
                <div style={{ width: '400px', display: 'flex', justifyContent: 'space-between' }}>
                  <p>订单号：{item.bill}</p>
                  <p>业务员：{item.name}</p>
                </div>
                <div style={{ width: '700px', display: 'flex', justifyContent: 'end' }}>
                  <p>共1件商品</p>&emsp;
                  <p>合计：￥{item.money}(含运费:￥0.00)</p>
                </div>
              </div>
              <div className={style.tab_main}>
                <div className={style.image}>
                  <p>
                    <img src={item.image} alt="" />
                  </p>
                  <div style={{ display: 'flex', borderRight: '#eee solid 1px', padding: '4px', height: 120 }}>
                    <p style={{ width: 280, marginRight: '10px' }}>
                      <span>{item.desc}</span><br /><br />
                      <b style={{ color: 'red' }}>{item.status}</b>
                    </p>
                    <div>
                      <p>￥{item.money}</p>
                      <p style={{ marginLeft: '40px' }}>x1</p>
                    </div>
                  </div>
                </div>
                <div>
                  <p style={{ width: 100, padding: '10px', borderRight: '1px solid #eee', height: 120 }}>
                    {item.shopname}-test
                  </p>
                </div>
                <div>
                  <p style={{ width: 500, padding: '10px', borderRight: '1px solid #eee', height: 120 }}>
                    {item.name2}&emsp;{item.phone} <br />
                    {item.address} <br />
                  </p>
                </div>
                <div style={{ padding: '10px', height: 120, width: 200 }}>
                  <a>
                    订单详情
                  </a>
                </div>
              </div>
            </div>
          ))
        }
      </div>
    },
    {
      key: '4', label: '待收货', children: <div>
        <div className={style.tab_top}>
          <p>订单信息</p>
          <p>卖家</p>
          <p>收货信息</p>
          <p>操作</p>
        </div>
        {
          orderFen.waitReceive.map((item) => (
            <div style={{ border: '#eee solid 1px', marginTop: '15px' }}>
              <div key={item.key} className={style.tab_body}>
                <div style={{ width: '400px', display: 'flex', justifyContent: 'space-between' }}>
                  <p>订单号：{item.bill}</p>
                  <p>业务员：{item.name}</p>
                </div>
                <div style={{ width: '700px', display: 'flex', justifyContent: 'end' }}>
                  <p>共1件商品</p>&emsp;
                  <p>合计：￥{item.money}(含运费:￥0.00)</p>
                </div>
              </div>
              <div className={style.tab_main}>
                <div className={style.image}>
                  <p>
                    <img src={item.image} alt="" />
                  </p>
                  <div style={{ display: 'flex', borderRight: '#eee solid 1px', padding: '4px', height: 120 }}>
                    <p style={{ width: 280, marginRight: '10px' }}>
                      <span>{item.desc}</span><br /><br />
                      <b style={{ color: 'red' }}>{item.status}</b>
                    </p>
                    <div>
                      <p>￥{item.money}</p>
                      <p style={{ marginLeft: '40px' }}>x1</p>
                    </div>
                  </div>
                </div>
                <div>
                  <p style={{ width: 100, padding: '10px', borderRight: '1px solid #eee', height: 120 }}>
                    {item.shopname}-test
                  </p>
                </div>
                <div>
                  <p style={{ width: 500, padding: '10px', borderRight: '1px solid #eee', height: 120 }}>
                    {item.name2}&emsp;{item.phone} <br />
                    {item.address} <br />
                  </p>
                </div>
                <div style={{ padding: '10px', height: 120, width: 200 }}>
                  <a>
                    订单详情
                  </a>
                </div>
              </div>
            </div>
          ))
        }
      </div>
    },
    {
      key: '5', label: '已完成', children: <div>
        <div className={style.tab_top}>
          <p>订单信息</p>
          <p>卖家</p>
          <p>收货信息</p>
          <p>操作</p>
        </div>
        {
          orderFen.waitOk.map((item) => (
            <div style={{ border: '#eee solid 1px', marginTop: '15px' }}>
              <div key={item.key} className={style.tab_body}>
                <div style={{ width: '400px', display: 'flex', justifyContent: 'space-between' }}>
                  <p>订单号：{item.bill}</p>
                  <p>业务员：{item.name}</p>
                </div>
                <div style={{ width: '700px', display: 'flex', justifyContent: 'end' }}>
                  <p>共1件商品</p>&emsp;
                  <p>合计：￥{item.money}(含运费:￥0.00)</p>
                </div>
              </div>
              <div className={style.tab_main}>
                <div className={style.image}>
                  <p>
                    <img src={item.image} alt="" />
                  </p>
                  <div style={{ display: 'flex', borderRight: '#eee solid 1px', padding: '4px', height: 120 }}>
                    <p style={{ width: 280, marginRight: '10px' }}>
                      <span>{item.desc}</span><br /><br />
                      <b style={{ color: 'red' }}>{item.status}</b>
                    </p>
                    <div>
                      <p>￥{item.money}</p>
                      <p style={{ marginLeft: '40px' }}>x1</p>
                    </div>
                  </div>
                </div>
                <div>
                  <p style={{ width: 100, padding: '10px', borderRight: '1px solid #eee', height: 120 }}>
                    {item.shopname}-test
                  </p>
                </div>
                <div>
                  <p style={{ width: 500, padding: '10px', borderRight: '1px solid #eee', height: 120 }}>
                    {item.name2}&emsp;{item.phone} <br />
                    {item.address} <br />
                  </p>
                </div>
                <div style={{ padding: '10px', height: 120, width: 200 }}>
                  <a>
                    订单详情
                  </a>
                </div>
              </div>
            </div>
          ))
        }
      </div>
    },
    {
      key: '6', label: '已关闭', children: <div>
        <div className={style.tab_top}>
          <p>订单信息</p>
          <p>卖家</p>
          <p>收货信息</p>
          <p>操作</p>
        </div>
        {
          orderFen.waitOff.map((item) => (
            <div style={{ border: '#eee solid 1px', marginTop: '15px' }}>
              <div key={item.key} className={style.tab_body}>
                <div style={{ width: '400px', display: 'flex', justifyContent: 'space-between' }}>
                  <p>订单号：{item.bill}</p>
                  <p>业务员：{item.name}</p>
                </div>
                <div style={{ width: '700px', display: 'flex', justifyContent: 'end' }}>
                  <p>共1件商品</p>&emsp;
                  <p>合计：￥{item.money}(含运费:￥0.00)</p>
                </div>
              </div>
              <div className={style.tab_main}>
                <div className={style.image}>
                  <p>
                    <img src={item.image} alt="" />
                  </p>
                  <div style={{ display: 'flex', borderRight: '#eee solid 1px', padding: '4px', height: 120 }}>
                    <p style={{ width: 280, marginRight: '10px' }}>
                      <span>{item.desc}</span><br /><br />
                      <b style={{ color: 'red' }}>{item.status}</b>
                    </p>
                    <div>
                      <p>￥{item.money}</p>
                      <p style={{ marginLeft: '40px' }}>x1</p>
                    </div>
                  </div>
                </div>
                <div>
                  <p style={{ width: 100, padding: '10px', borderRight: '1px solid #eee', height: 120 }}>
                    {item.shopname}-test
                  </p>
                </div>
                <div>
                  <p style={{ width: 500, padding: '10px', borderRight: '1px solid #eee', height: 120 }}>
                    {item.name2}&emsp;{item.phone} <br />
                    {item.address} <br />
                  </p>
                </div>
                <div style={{ padding: '10px', height: 120, width: 200 }}>
                  <a>
                    订单详情
                  </a>
                </div>
              </div>
            </div>
          ))
        }
      </div>
    }
  ];
  return (
    <div className={style.orderMain}>
      <div className={style.orderBody}>
        <div className={style.orderTop}>
          <h3>订单管理</h3>
          <div className={style.orderSearch}>
            <div>
              <span>订单编号：</span>
              <input type="text" placeholder="请输入订单编号" value={searchBill} onChange={(e) => setSearchBill(e.target.value)} />
            </div>
            <div className={style.res}>
              <Form initialValues={{ RangePicker: initialDateRange }}>
                <Form.Item
                  label="下单时间"
                  name="RangePicker"
                  rules={[{ required: false, message: 'Please input!' }]}
                >
                  <RangePicker />
                </Form.Item>
              </Form>
            </div>
          </div>
          <div className={style.orderTopBody}>
            <div>
              <span>订单状态：</span>
              <Select
                defaultValue="全部"
                style={{ width: 130 }}
                onChange={handleChange}
                value={selectOrderStatus}
                options={[
                  { value: '全部', label: '全部' },
                  { value: '待付款', label: '待付款' },
                  { value: '待发货', label: '待发货' },
                  { value: '待收货', label: '待收货' },
                  { value: '已完成', label: '已完成' },
                  { value: '已关闭', label: '已关闭' },
                ]}
              />
            </div>
            <div>
              <span>退款状态：</span>
              <Select
                defaultValue="暂不选择"
                style={{ width: 130 }}
                onChange={(value) => setSelectedRefundStatus(value)}
                value={selectedRefundStatus}
                options={[
                  { value: '全部', label: '全部' },
                  { value: '未付款', label: '未付款' },
                  { value: '待付款', label: '待付款' },
                  { value: '已付款', label: '已付款' },
                ]}
              />
            </div>
          </div>
          <div style={{ marginTop: '15px' }}>
            <Button type='primary' style={{ marginRight: '10px' }} onClick={handleOrderSearch}>筛选订单</Button>
            <Button style={{ marginRight: '10px' }}>清空筛选条件</Button>
            <Button style={{ marginRight: '10px' }}>批量导出</Button>
          </div>
        </div>
        <div className={style.orderTable}>
          <div className={style.orderTabs}>
            <Tabs
              defaultActiveKey="1"
              items={items}
              onChange={onChange}
            />

          </div>
        </div>
      </div>


    </div>
  )
}

export default Index
